<template>
	<div class="home-header">
		<div class="header-left">
			<div class="iconfont">&#xeb9a;</div>
		</div>
		<div class="header-search">
			<div class="search-input">
				<span class="iconfont">&#xeb86;</span>
				输入城市、景点、游玩主题
			</div>
		</div>
		<div class="header-right">
			城市
			<span class="iconfont more-city-icon">&#xe64a;</span>
		</div>
	</div>
</template>

<script>
	export default {
		name:'HomeHeader',
	};
</script>

<style lang="scss" scoped>
	@import 'styles/varibles';
	.home-header {
		display: flex;
		height: $headerHeight;
		line-height: $headerHeight;
		background-color: $themeColor;
		color:#fff;
		.header-left {
			width: .54rem;
			text-align: center;
		}
		.header-search {
			flex:1;
			background-color: #FFF;
			color:#ccc;
			margin-top: .14rem;
			margin-left: .2rem;
			padding-left: .1rem;
			height: .64rem;
			line-height: .64rem;
			border-radius: .1rem;
		}
		.header-right {
			padding-left: .1rem;
			min-width: 1.08rem;
			text-align: center;
			.more-city-icon {
				margin-left: -.05rem;
				font-size: .2rem;
			}
		}
	}
</style>